<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/nav.css">
    <link rel="stylesheet" href="./css/skills.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <div class="w">
            <div class="n-l">
                <h1>个人网页</h1>
            </div>
            <div class="n-r">
                <ul>
                    <li><a href="./index.html">主页</a></li>
                    <li><a href="./skills.html">技能</a></li>
                    <li><a href="./more.html">更多</a></li>
                    <div class="animation"></div>
                </ul>
            </div>
        </div>
    </div>
    <div class="box">
        <div class="box-1"></div>
    </div>
    <!-- 技能 -->
    <div class="skills-container">
        <h2 class="skills-title">我的技能</h2>
        <div class="skills-cards">
        <div class="skill-card">
            <h3 class="card-header">✅ 已掌握</h3>
            <ul class="skill-list">
                <li>HTML5 基础语义化标签</li>
                <li>CSS3 核心样式（选择器/盒子模型）</li>
                <li>Flex/Grid 布局</li>
                <li>CSS 动画</li>
            </ul>
        </div>
        <div class="skill-card">
            <h3 class="card-header">📚 学习中</h3>
            <ul class="skill-list">
                <li>less使用</li>
                <li>移动端</li>
                <li>响应式</li>
            </ul>
        </div>
        <div class="skill-card">
            <h3 class="card-header">🎯 计划学习</h3>
            <ul class="skill-list">
                <li>JavaScript</li>
                <li>Vue</li>
            </ul>
        </div>
    </div>
    <div class="git">
        <div class="content">
            <h2>我的Git仓库</h2>
        <a href="https://gitee.com/zhuruitian/zhu-ruitian">访问我的Git</a>
        </div>
    </div>
</div>
</body>
</html>